import { Input, Select, Checkbox } from 'antd';
import React, { useState } from 'react';
import styles from './RightPanel.less';

export default function RightPanel(props) {
  const { modeler } = props;
  const [curElement, setCurElement] = useState(undefined);

  //////////////////
  // data from server

  // 条件列表
  const [conditionList, setConditionList] = useState([]);
  // 资源列表
  const [resourceList, setResourceList] = useState([]);

  //////////////////
  // Editable properties

  // 所有对象均可以修改的 name
  const [name, setName] = useState('');
  // SequenceFlow 选择的 rule
  const [selRule, setSelRule] = useState('');
  // ServiceTask 选择的 一个rule
  const [selRuleList, setSelRuleList] = useState([]);
  // ServiceTask:Send Service 选择的 多个资源
  const [selSendRuleList, setSelSendRuleList] = useState([]);

  if (modeler) {
    modeler.on('selection.changed', (e) => {
      if (e.newSelection.length > 0 && e.newSelection[0] !== curElement) {
        setCurElement(e.newSelection[0]);
        setName(e.newSelection[0].businessObject.name);
      } else if (e.newSelection.length === 0) {
        // 没选中任何目标，就选中 process
        const elementRegistry = modeler.get('elementRegistry');
        const processEl = elementRegistry.find((el) => el.type === 'bpmn:Process');
        if (processEl) {
          setCurElement(processEl);
          setName(processEl.businessObject.name);
        }
      }
    });
  }

  if (!modeler || !curElement) return null;

  // console.log('render -> RightPanel');
  const modeling = modeler.get('modeling');
  const updateProperties = (o) => modeling.updateProperties(curElement, o);

  const commonProp = (
    <div>
      <table>
        <tbody>
          <tr>
            <td>ID:</td>
            <td>
              <Input disabled value={curElement.id}></Input>
            </td>
          </tr>
          <tr>
            <td>名称:</td>
            <td>
              <Input
                value={name}
                onChange={(event) => {
                  setName(event.target.value);
                  updateProperties({ name: event.target.value });
                }}
              ></Input>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );

  let detailProp = null;
  if (curElement.type === 'bpmn:SequenceFlow') {
    // 一个 (规则)
    detailProp = (
      <div>
        <table>
          <tbody>
            <tr>
              <td>条件:</td>
              <td>
                <Select defaultValue={selRule}>
                  {conditionList.map((d) => (
                    <Select.Option key={d.key} value={d.value} />
                  ))}
                </Select>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  } else if (curElement.type === 'bpmn:ServiceTask') {
    // 多个 条件表达式的 (规则)
    detailProp = (
      <div>
        <Checkbox.Group
          defaultValue={selRuleList}
          options={conditionList}
          onChange={(event) => {
            updateProperties({ myrules: event.join(',') });
          }}
        />
      </div>
    );
  } else if (curElement.type === 'bpmn:SendTask') {
    // 多个 (资源)
    detailProp = (
      <div>
        <Checkbox.Group
          defaultValue={selSendRuleList}
          options={resourceList}
          onChange={(event) => {
            updateProperties({ myresources: event.join(',') });
          }}
        />
      </div>
    );
  } else if (
    curElement.type === 'bpmn:ExclusiveGateway' ||
    curElement.type === 'bpmn:InclusiveGateway' ||
    curElement.type === 'bpmn:ParallelGateway'
  ) {
    // 各种网关
    detailProp = null;
  } else if (curElement.type === 'bpmn:ReceiveTask') {
    // 第一期暂时不做
    detailProp = null;
  }

  return (
    <div className={styles.rightPanel}>
      <div className={styles.title}>{curElement.type}</div>
      {commonProp}
      {detailProp}
    </div>
  );
}
